<template>
  <div class="demo">
    <div class="demo-title">自动分词</div>
    <div class="demo-content">
      <Select
        v-model:value="value"
        mode="tags"
        style="width: 100%"
        :token-separators="[',']"
        placeholder="Automatic tokenization"
        :options="options"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import Select from '@sscd/select';
  import type { SelectProps } from '@sscd/select';
  const options = ref<SelectProps['options']>([{ value: 'a1', label: 'a1' }]);
  const handleChange = (val) => console.log(`selected ${val}`);
  const value = ref<string[]>([]);
  watch(
    () => value,
    () => console.log('value', value.value)
  );
</script>
